<template>
    <!-- 我的等级 -->
    <view>
        <view class="member-center">
            <!-- #ifdef MP -->
            <NavBar titleText="会员中心" :iconColor="iconColor" :textColor="iconColor" :isScrolling="isScrolling" showBack></NavBar>
            <!-- #endif -->
            <image v-show="currentIndex == index" v-for="(item, index) in VipList" :src="item.image" mode="aspectFill" class="headerBg"></image>
            <view class="header">
                <swiper class="swiper" :current="currentIndex" previous-margin="48rpx" next-margin="48rpx" @change="swiperChange">
                    <swiper-item v-for="(item, index) in VipList" :key="item.id">
                        <view class="swiper-item" :class="{ on: currentIndex == index }" :style="[gradeStyle(item)]">
                            <view class="current">
                                <view class="background" :style="{ backgroundColor: item.color }"></view>
                                <view class="inner acea-row row-center-wrapper" v-if="item.grade < levelInfo.grade">已解锁</view>
                                <view class="inner acea-row row-center-wrapper" v-if="item.grade === levelInfo.grade">当前等级</view>
                                <view class="inner acea-row row-center-wrapper" v-if="item.grade > levelInfo.grade">待解锁</view>
                            </view>
                            <view class="level acea-row row-middle">
                                <text class="iconfont icon-ic_crown1"></text>
                                {{ item.name }}
                            </view>
                            <view class="discount">
                                商城购物可享
                                <text class="number">{{ parseFloat(item.discount) / 10 }}</text>
                                折
                            </view>
                            <view class="grow-wrap acea-row row-between-wrapper">
                                <view v-if="item.lack_exp_num == 0">您已经是尊贵的{{ item.name }}会员</view>
                                <view v-else class="grow acea-row row-middle">
                                    <text class="number">{{ levelInfo.exp }}</text>
                                    成长值 还差
                                    <text class="number">{{ item.lack_exp_num }}</text>
                                </view>
                                <navigator class="record acea-row row-middle" url="/pages/users/user_vip_areer/index" hover-class="none">
                                    我的成长值记录
                                    <text class="iconfont icon-ic_rightarrow"></text>
                                </navigator>
                            </view>
                            <view class="progress">
                                <view :style="[progressValue(item, index)]" class="inner"></view>
                            </view>
                        </view>
                    </swiper-item>
                </swiper>
                <view class="steps steps1 acea-row row-center-wrapper" v-if="VipList.length && VipList.length < 6">
                    <view v-for="(item, index) in VipList" :key="item.id" :class="{ success: currentIndex == index }" class="item">
                        <view class="head">
                            <view class="line"></view>
                            <view class="icon acea-row row-center-wrapper">
                                <view class="inner"></view>
                            </view>
                        </view>
                        <view class="main">{{ item.name }}</view>
                    </view>
                </view>
                <view class="steps steps2" v-else>
                    <view class="px-40">
                        <scroll-view scroll-x="true" class="white-nowrap vertical-middle w-full" show-scrollbar="false">
                            <view class="inline-block item h-100" v-for="(item, index) in VipList" :key="item.id" :class="{ success: currentIndex == index }">
                                <view class="head">
                                    <view class="line"></view>
                                    <view class="icon acea-row row-center-wrapper">
                                        <view class="inner"></view>
                                    </view>
                                </view>
                                <view class="main">{{ item.name }}</view>
                            </view>
                        </scroll-view>
                    </view>
                </view>
                <!-- 4项会员特权 -->
                <view class="privilege-section">
                    <view class="section-hd">会员特权</view>
                    <view class="section-bd acea-row">
                        <view class="item">
                            <view class="image-wrap acea-row row-center-wrapper">
                                <image class="image" :src="imgHost + '/statics/images/userVip1.png'"></image>
                            </view>
                            <view>购物折扣</view>
                        </view>
                        <view class="item">
                            <view class="image-wrap acea-row row-center-wrapper">
                                <image class="image" :src="imgHost + '/statics/images/userVip2.png'"></image>
                            </view>
                            <view>专属徽章</view>
                        </view>
                        <view class="item">
                            <view class="image-wrap acea-row row-center-wrapper">
                                <image class="image" :src="imgHost + '/statics/images/userVip3.png'"></image>
                            </view>
                            <view>经验累积</view>
                        </view>
                        <view class="item">
                            <view class="image-wrap acea-row row-center-wrapper">
                                <image class="image" :src="imgHost + '/statics/images/userVip4.png'"></image>
                            </view>
                            <view>尊享客服</view>
                        </view>
                    </view>
                </view>
            </view>
            <view class="skill-wrapper">
                <view class="skill-section">
                    <view class="section-hd">快速升级技巧</view>
                    <view class="section-bd">
                        <view class="item acea-row row-middle" v-if="signInStatus">
                            <view class="image-wrap acea-row row-center-wrapper">
                                <image :src="imgHost + '/statics/images/user-vip-qd.png'" class="image"></image>
                            </view>
                            <view class="text">
                                <view class="title">
                                    签到
                                    <text class="mark">可获得{{ taskInfo.sign || 0 }}点经验</text>
                                </view>
                                <view class="info">每日签到可获得经验值，已签到{{ taskInfo.sign_count || 0 }}天</view>
                            </view>
                            <navigator class="link acea-row row-middle" url="/pages/users/user_sgin/index" hover-class="none">去签到</navigator>
                        </view>
                        <view class="item acea-row row-middle">
                            <view class="image-wrap acea-row row-center-wrapper">
                                <image :src="imgHost + '/statics/images/user-vip-gm.png'" class="image"></image>
                            </view>
                            <view class="text">
                                <view class="title">
                                    购买商品
                                    <text class="mark">+{{ taskInfo.order || 0 }}点经验/元</text>
                                </view>
                                <view class="info">购买商品可获得对应的经验值</view>
                            </view>
                            <navigator class="link acea-row row-middle" open-type="switchTab" url="/pages/goods_cate/goods_cate" hover-class="none">去购买</navigator>
                        </view>
                        <view class="item acea-row row-middle">
                            <view class="image-wrap acea-row row-center-wrapper">
                                <image :src="imgHost + '/statics/images/user-vip-yq.png'" class="image"></image>
                            </view>
                            <view class="text">
                                <view class="title">
                                    邀请好友
                                    <text class="mark">+{{ taskInfo.invite || 0 }}点经验/人</text>
                                </view>
                                <view class="info">邀请好友注册商城可获得经验值</view>
                            </view>
                            <navigator class="link acea-row row-middle" url="/pages/users/user_spread_code/index" hover-class="none">去邀请</navigator>
                        </view>
                    </view>
                </view>
                <view v-if="hostProduct.length" class="px-20">
                    <recommend :hostProduct="hostProduct" title="商品推荐"></recommend>
                </view>
            </view>
            <view class="growthValue" :class="growthValue == false ? 'on' : ''">
                <view class="pictrue">
                    <!-- <image src='../static/value.jpg'></image> -->
                    <text class="iconfont icon-guanbi3" @click="growthValue"></text>
                </view>
                <view class="conter">{{ illustrate }}</view>
            </view>
            <view class="mask" :hidden="growthValue" @click="growthValueClose"></view>
        </view>
        <home></home>
    </view>
</template>

<script>
import { getUserInfo, getlevelInfo, userLevelGrade, userLevelTask, userLevelDetection, getSignConfig } from '@/api/user.js';
import { getProductHot } from '@/api/store.js';
import { toLogin } from '@/libs/login.js';
import { mapGetters } from 'vuex';
import { HTTP_REQUEST_URL } from '@/config/app';
import recommend from '@/components/recommend';
import NavBar from '@/components/NavBar';
export default {
    components: {
        recommend,
        NavBar
    },
    data() {
        return {
            imgHost: HTTP_REQUEST_URL,
            reach_count: 0,
            VipList: [],
            // indicatorDots: false,
            // circular: true,
            // autoplay: false,
            // interval: 3000,
            // duration: 500,
            currentIndex: 0,
            growthValue: true,
            task: [], //任务列表
            illustrate: '', //任务说明
            level_id: 0, //任务id,
            hostProduct: [],
            grade: 0,
            isAuto: false, //没有授权的不会自动授权
            isShowAuth: false, //是否隐藏授权
            hotScroll: false,
            hotPage: 1,
            hotLimit: 10,
            level_title: '',
            level_discount: '',
            levelInfo: {},
            task_list: [
                {
                    real_name: '积分数',
                    number: 0
                },
                {
                    real_name: '消费金额',
                    number: 0
                },
                {
                    real_name: '优惠券',
                    number: 0
                }
            ],
            userInfo: {},
            taskInfo: {},
            is_open_member: false, //判断是否开启付费会员
            // #ifdef MP
            iconColor: '#FFFFFF',
            isScrolling: false,
            // #endif
            signInStatus: 0 //签到是否开启
        };
    },
    computed: {
        ...mapGetters(['isLogin'])
    },
    watch: {
        VipList: function () {
            let that = this;
            if (that.VipList.length > 0) {
                that.VipList.forEach(function (item, index) {
                    if (item.is_clear === false) {
                        // that.swiper.slideTo(index);
                        that.activeIndex = index;
                        that.grade = item.grade;
                    }
                });
            }
        },
        isLogin: {
            handler: function (newV, oldV) {
                if (newV) {
                    // #ifdef H5 || APP-PLUS
                    this.setLeveLComplete();
                    // #endif
                }
            },
            deep: true
        }
    },
    onLoad() {
        this.get_host_product();
        if (this.isLogin) {
            this.setLeveLComplete();
            this.getlevelInfo();
            this.getUserInfo();
            this.signStatus();
        } else {
            toLogin();
        }
        let that = this;
        setTimeout(function () {
            that.loading = true;
        }, 500);
    },
    onShow() {
        uni.removeStorageSync('form_type_cart');
    },
    onPageScroll(e) {
        uni.$emit('scroll');
        // #ifdef MP
        if (e.scrollTop > 50) {
            this.iconColor = '#333333';
            this.isScrolling = true;
        } else if (e.scrollTop < 50) {
            this.iconColor = '#FFFFFF';
            this.isScrolling = false;
        }
        // #endif
    },
    methods: {
        signStatus() {
            getSignConfig()
                .then((res) => {
                    this.signInStatus = res.data.signStatus;
                })
                .catch((err) => {
                    this.$util.Tips({
                        title: err
                    });
                });
        },
        gradeStyle(item) {
            return {
                'background-image': `url("${item.icon}")`,
                color: item.color
            };
        },
        progressValue(item, index) {
            let width = 100;
            let num = item.exp_num - parseFloat(item.lack_exp_num);
            width = (num / item.exp_num) * 100;
            return {
                width: `${width}%`,
                'background-color': item.color
            };
        },
        getUserInfo: function () {
            getUserInfo().then((res) => {
                this.is_open_member = res.data.is_open_member;
                this.task_list = [
                    {
                        real_name: '积分数',
                        number: res.data.integral
                    },
                    {
                        real_name: '消费金额',
                        number: res.data.orderStatusSum
                    },
                    {
                        real_name: '优惠券',
                        number: res.data.couponCount
                    }
                ];
            });
        },
        getlevelInfo: function () {
            getlevelInfo().then((res) => {
                const { level_info, level_list, task, user } = res.data;
                this.levelInfo = level_info;
                this.VipList = level_list;
                this.userInfo = user;
                this.taskInfo = task;
                this.levelInfo.exp = parseFloat(this.levelInfo.exp);
                this.levelInfo.rate = Math.floor((this.levelInfo.exp / this.levelInfo.exp_num) * 100);
                if (this.levelInfo.rate > 100) {
                    this.levelInfo.rate = 100;
                }
                const index = level_list.findIndex(({ grade }) => grade === level_info.grade);
                if (index !== -1) {
                    this.currentIndex = index;
                }
            });
        },
        onLoadFun() {
            this.setLeveLComplete();
            this.getlevelInfo();
            this.getUserInfo();
            this.isShowAuth = false;
        },
        // 授权关闭
        authColse: function (e) {
            this.isShowAuth = e;
        },
        /**
         * 获取我的推荐
         */
        get_host_product: function () {
            let that = this;
            if (that.hotScroll) return;
            getProductHot(that.hotPage, that.hotLimit).then((res) => {
                that.hotPage++;
                that.hotScroll = res.data.length < that.hotLimit;
                that.hostProduct = that.hostProduct.concat(res.data);
            });
        },
        /**
         * 会员切换
         *
         */
        swiperChange(e) {
            let index = e.detail.current;
            this.currentIndex = index;
            this.level_id = this.VipList[index].id || 0;
            this.level_title = this.VipList[index].name || '';
            this.level_discount = this.VipList[index].discount || '';
            // this.grade = this.VipList[index].grade
            // this.getTask();
        },
        /**
         * 关闭说明
         */
        growthValueClose: function () {
            this.growthValue = true;
        },
        /**
         * 打开说明
         */
        opHelp: function (index) {
            this.growthValue = false;
            this.illustrate = this.task[index].illustrate;
        },
        /**
         * 设置会员
         */
        setLeveLComplete: function () {
            let that = this;
            userLevelDetection().then((res) => {
                // that.getVipList();
            });
        },
        /**
         * 获取会员等级
         *
         */
        getVipList: function () {
            let that = this;
            userLevelGrade().then((res) => {
                that.$set(that, 'VipList', res.data.list);
                that.task = res.data.task.task;
                that.reach_count = res.data.task.reach_count;
                that.level_id = res.data.list.length && res.data.list[0] ? res.data.list[0].id : 0;
                that.level_title = res.data.list.length && res.data.list[0] ? res.data.list[0].name : '';
                that.level_discount = res.data.list.length && res.data.list[0] ? res.data.list[0].discount : '';
                // let arr = [];
                // res.data.list.forEach(function(item, index) {
                // 	if (item.is_clear == false) {
                // 		arr.push(item.grade);
                // 	}
                // })
                // that.grade = arr[0] || 0;
                // that.grade = res.data.list[0].grade
            });
        },
        /**
         * 获取任务要求
         */
        getTask: function () {
            let that = this;
            userLevelTask(that.level_id).then((res) => {
                that.task = res.data.task;
                that.reach_count = res.data.reach_count;
            });
        }
    },
    onReachBottom() {
        this.get_host_product();
    }
};
</script>

<style lang="scss" scoped>
.swiper {
    height: 299rpx;

    .swiper-item {
        position: relative;
        height: 100%;
        padding: 42rpx 48rpx 36rpx;
        border-radius: 40rpx;
        background: center/100% 100% no-repeat;
        transform: scale(0.9);
        transition: all 0.2s ease-in 0s;
        overflow: hidden;

        &.on {
            transform: none;
        }

        .current {
            position: absolute;
            top: 0;
            left: 0;

            .background {
                width: 158rpx;
                height: 38rpx;
                border-bottom-right-radius: 38rpx;
                background-color: var(--grade-color);
                opacity: 0.3;
            }

            .inner {
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                font-weight: 500;
                font-size: 20rpx;
            }
        }

        .level {
            font-weight: 600;
            font-size: 44rpx;
            line-height: 62rpx;

            .iconfont {
                margin-right: 12rpx;
                font-size: 48rpx;
            }
        }

        .discount {
            font-size: 24rpx;
            line-height: 34rpx;

            .number {
                font-family: Regular;
                font-size: 28rpx;
            }
        }

        .progress {
            height: 8rpx;
            border-radius: 4rpx;
            margin-top: 20rpx;
            background: rgba(255, 255, 255, 0.4);

            .inner {
                width: 50%;
                height: 8rpx;
                border-radius: 4rpx;
                background-color: var(--grade-color);
                opacity: 0.8;
            }
        }
    }

    .grow-wrap {
        margin-top: 60rpx;

        .grow {
            font-size: 24rpx;
            line-height: 34rpx;
        }

        .number {
            margin-right: 8rpx;
            font-family: SemiBold;
            font-size: 32rpx;

            &:nth-child(2) {
                margin-left: 8rpx;
            }
        }

        .record {
            font-size: 22rpx;

            .iconfont {
                font-size: 24rpx;
            }
        }
    }

    .pass {
        display: inline-block;
        width: 292rpx;
        height: 56rpx;
        margin-top: 80rpx;
        margin-left: 42rpx;
        background: url('')
            center/100% 100% no-repeat;
        font-weight: bold;
        font-size: 30rpx;
        line-height: 56rpx;
        text-align: center;
        color: #282828;
    }

    .lock {
        font-weight: bold;
        font-size: 30rpx;
        color: #282828;

        .iconfont {
            margin-right: 17rpx;
            font-size: 30rpx;
            vertical-align: middle;
        }
    }
}

.privilege-section {
    border-radius: 32rpx;
    margin: 0 20rpx;
    background: rgba(255, 255, 255, 0.05);

    .section-hd {
        padding: 32rpx 32rpx 0;
        font-weight: 500;
        font-size: 30rpx;
        color: #ffffff;
    }

    .svip {
        height: 40rpx;
        padding-right: 37rpx;
        padding-left: 19rpx;
        border-radius: 20rpx;
        background: #333333
            url('')
            calc(100% - 13rpx) center/19rpx 22rpx no-repeat;
        font-size: 24rpx;
        line-height: 40rpx;
        text-align: center;
        color: #ffdeb2;
    }

    .section-bd {
        .item {
            flex: 0 0 25%;
            padding: 40rpx 0 82rpx;
            font-size: 24rpx;
            line-height: 34rpx;
            text-align: center;
            color: #ffffff;

            .image-wrap {
                width: 88rpx;
                height: 88rpx;
                border-radius: 32rpx;
                margin: 0 auto 16rpx;
                background: rgba(255, 255, 255, 0.05);
            }

            .image {
                width: 48rpx;
                height: 48rpx;
            }
        }
    }
}

.skill-wrapper {
    position: relative;
    border-radius: 40rpx;
    margin-top: -56rpx;
    background: #f3f4f7;
    overflow: hidden;
}

.skill-section {
    border-radius: 32rpx;
    margin: 24rpx 20rpx 0;
    background-color: #ffffff;

    .section-hd {
        padding: 32rpx 32rpx;
        font-weight: 500;
        font-size: 32rpx;
        color: #333333;
    }

    .section-bd {
        padding-bottom: 32rpx;

        .item {
            padding: 0 26rpx 0 32rpx;

            + .item {
                margin-top: 44rpx;
            }
        }

        .image {
            display: block;
            width: 100rpx;
            height: 100rpx;
        }

        .text {
            flex: 1;
        }

        .title {
            padding-left: 24rpx;
            font-weight: 500;
            font-size: 28rpx;
            line-height: 40rpx;
            color: #333333;

            .mark {
                padding-left: 8rpx;
                font-weight: 400;
                font-size: 24rpx;
                color: rgba(126, 75, 6, 0.8);
            }
        }

        .info {
            padding: 8rpx 0 0 24rpx;
            font-size: 22rpx;
            color: #999999;
        }

        .link {
            height: 48rpx;
            padding: 0 24rpx;
            border-radius: 24rpx;
            background: linear-gradient(-90deg, #e7b667 0%, #ffeab5 100%);
            font-weight: 500;
            font-size: 24rpx;
            color: #7e4b06;
        }
    }
}

.member-center .headerBg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 990rpx;
}

.member-center .header {
    position: relative;
    padding: 36rpx 0 10rpx;
    color: var(--grade-color);
}

.member-center .header swiper {
    position: relative;
}

.member-center .wrapper {
    background-color: #fff;
    padding-bottom: 16rpx;
    margin-bottom: 20rpx;
}

.member-center .wrapper .title {
    height: 98rpx;
    padding: 0 30rpx;
    font-size: 30rpx;
    font-weight: bold;
    color: #282828;
}

.member-center .wrapper .title .iconfont {
    color: #ffae06;
    font-weight: normal;
    font-size: 40rpx;
    margin-right: 12rpx;
    vertical-align: -2rpx;
}

.member-center .wrapper .title .num {
    font-size: 28rpx;
    color: #999;
}

.member-center .wrapper .title .num .current {
    color: #ffae06;
}

.member-center .wrapper .list .item {
    width: 690rpx;
    height: 184rpx;
    background-color: #f9f9f9;
    margin: 0 auto 20rpx auto;
    padding: 27rpx 0 22rpx 0;
    border-radius: 12rpx;
    box-sizing: border-box;
}

.member-center .wrapper .list .item .top {
    padding-right: 27rpx;
    font-size: 26rpx;
    color: #999;
}

.member-center .wrapper .list .item .top .name {
    border-left: 6rpx solid #ffae06;
    padding-left: 20rpx;
    font-size: 28rpx;
    color: #282828;
    font-weight: bold;
}

.member-center .wrapper .list .item .top .name .iconfont {
    color: #999;
    font-size: 30rpx;
    vertical-align: -2rpx;
    margin-left: 10rpx;
}

.member-center .wrapper .list .item .cu-progress {
    overflow: hidden;
    height: 12rpx;
    background-color: #eee;
    width: 636rpx;
    border-radius: 20rpx;
    margin: 35rpx auto 0 auto;
}

.member-center .wrapper .list .item .cu-progress .bg-red {
    width: 0;
    height: 100%;
    transition: width 0.6s ease;
    background-color: #ffaa29;
    border-radius: 20rpx;
}

.member-center .wrapper .list .item .experience {
    margin-top: 17rpx;
    padding: 0 27rpx;
    font-size: 24rpx;
    color: #999;
}

.member-center .wrapper .list .item .experience .num {
    color: #ffad07;
}

.member-center .growthValue {
    background-color: #fff;
    border-radius: 16rpx;
    position: fixed;
    top: 266rpx;
    left: 50%;
    width: 560rpx;
    height: 740rpx;
    margin-left: -280rpx;
    z-index: 99;
    transform: translate3d(0, -200%, 0);
    transition: all 0.3s cubic-bezier(0.25, 0.5, 0.5, 0.9);
}

.member-center .growthValue.on {
    transform: translate3d(0, 0, 0);
}

.member-center .growthValue .pictrue {
    width: 100%;
    height: 257rpx;
    position: relative;
}

.member-center .growthValue .pictrue image {
    width: 100%;
    height: 100%;
    border-radius: 16rpx 16rpx 0 0;
}

.member-center .growthValue .conter {
    padding: 0 35rpx;
    font-size: 30rpx;
    color: #333;
    margin-top: 58rpx;
    line-height: 1.5;
    height: 350rpx;
    overflow: auto;
}

.member-center .growthValue .pictrue .iconfont {
    position: absolute;
    font-size: 65rpx;
    color: #fff;
    top: 775rpx;
    left: 50%;
    transform: translateX(-50%);
}

.trait {
    margin-top: 36rpx;

    .trait-hd {
        display: flex;
        justify-content: center;
        align-items: center;

        .title {
            padding-right: 50rpx;
            padding-left: 50rpx;
            background: url('')
                    left center/36rpx 21rpx no-repeat,
                url('')
                    right center/36rpx 21rpx no-repeat;
            font-size: 28rpx;
            color: #ffffff;
        }
    }

    .trait-bd {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin: 20rpx 30rpx 0;

        .item {
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            width: 156rpx;
            height: 173rpx;
            border-radius: 8rpx;
            background-color: rgba(255, 255, 255, 0.06);
            font-size: 22rpx;
            color: #ffffff;
        }

        .image {
            width: 68rpx;
            height: 68rpx;
            margin-bottom: 13rpx;
            background: center/cover no-repeat;

            &.image1 {
                background-image: url('');
            }

            &.image2 {
                background-image: url('');
            }

            &.image3 {
                background-image: url('');
            }

            &.image4 {
                background-image: url('');
            }
        }

        .text {
            color: #fcdb9c;
        }
    }
}

.module {
    padding: 40rpx 30rpx 0 30rpx;
    margin-bottom: 20rpx;
    background-color: #ffffff;

    .icons {
        width: 5rpx;
        height: 30rpx;
        margin-right: 8rpx;
        background-color: #e6c083;
    }

    .link {
        font-size: 24rpx;
        color: #999999;

        .iconfont {
            margin-left: 6rpx;
            font-size: 24rpx;
            color: #999999;
        }
    }

    .gainList {
        margin-top: 10rpx;

        .item {
            height: 130rpx;
            position: relative;

            .picTxt {
                .pictrue {
                    width: 70rpx;
                    height: 70rpx;
                    border-radius: 50%;
                    background: url('')
                        center/cover no-repeat;
                    text-align: center;
                    line-height: 70rpx;
                    color: #fff;

                    &.on {
                        background-image: url('');
                    }

                    &.on2 {
                        background-image: url('');
                    }
                }

                .text {
                    margin-left: 30rpx;
                    width: 400rpx;

                    .name {
                        font-size: 30rpx;
                        color: #282828;
                    }

                    .info {
                        font-size: 24rpx;
                        color: #999999;
                        margin-top: 6rpx;
                    }
                }
            }

            .button {
                width: 140rpx;
                height: 50rpx;
                background: #fcdb9c;
                border-radius: 25rpx;
                text-align: center;
                line-height: 50rpx;
                font-size: 26rpx;
                color: #8d5306;
            }

            & ~ .item {
                &::after {
                    position: absolute;
                    content: ' ';
                    width: 720rpx;
                    height: 1rpx;
                    background: rgba(245, 245, 245, 1);
                    top: 0;
                    left: 0;
                }
            }
        }
    }
}
.steps1{
	padding: 48rpx 0 76rpx;
}
.steps2{
	padding: 48rpx 0 0;
}
.steps {
    .item {
        position: relative;
        margin-right: 106rpx;

        &:first-child {
            .icon {
                // background: rgba(255, 255, 255, 0.2);
            }

            .inner {
                // background: #D8D8D8;
            }
        }

        &:last-child {
            margin-right: 0;

            .line {
                display: none;
            }
        }

        &.success {
            position: relative;

            .inner {
                background: #d8d8d8;
            }

            .line {
                // background: #D8D8D8;
            }

            .icon {
                background: rgba(255, 255, 255, 0.2);
            }

            + .item {
                .icon {
                    // background: rgba(255, 255, 255, 0.2);
                }

                .inner {
                    // background: #D8D8D8;
                }
            }
        }
    }

    .head {
        position: relative;
    }

    .line {
        position: absolute;
        top: 50%;
        left: 12rpx;
        width: 130rpx;
        height: 4rpx;
        background: rgba(216, 216, 216, 0.1);
        transform: translateY(-50%);
    }

    .icon {
        width: 24rpx;
        height: 24rpx;
        border-radius: 50%;
        background: rgba(255, 255, 255, 0);
    }

    .inner {
        width: 12rpx;
        height: 12rpx;
        border-radius: 50%;
        background: rgba(255, 255, 255, 0.3);
    }

    .main {
        position: absolute;
        top: 32rpx;
        left: 12rpx;
        font-size: 20rpx;
        line-height: 28rpx;
        color: rgba(255, 255, 255, 0.5);
        transform: translateX(-50%);
        white-space: nowrap;
    }
}
</style>
